<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
        await 到底在等什么
        1. 等待promise执行resolve()
        2. await后续代码都是微任务异步代码
        3. await 设定先后顺序（结果输出排序），后续await结果输出需要等待前一个结果的输出，即使后边的await早就拿到结果了。
              */
      const p1 = new Promise((resolve) => {
        setTimeout(() => {
          resolve(1);
        }, Math.random() * 10000);
      });

      const p2 = new Promise((resolve) => {
        setTimeout(() => {
          resolve(2);
        }, Math.random() * 100);
      });

      const p3 = new Promise((resolve) => {
        setTimeout(() => {
          resolve(3);
        }, Math.random() * 100);
      });

      async function fn() {
        const a1 = await p1;
        console.log(a1);
        const a2 = await p2;
        console.log(a2);
        const a3 = await p3;
        console.log(a3);
      }
      fn();
    </script>
  </body>
</html>
